<template>
	<notice :notice.sync="notice"></notice>
	<header-class action="grade"></header-class>
	
	<div class="loading-class" v-if="loading">
		<i class="fa fa-spinner fa-spin fa-3x"></i>
	</div>
	<div class="container" id="grade-container">
		<div class="row">
			<div class="col-md-4 col-md-offset-2">
				<span class="text-primary">未交 {{quizLeft}}</span>
				<span class="text-primary">已完成 {{quizs.length-quizLeft}}</span>
			</div>
		</div>
		<div class="row" v-if="!loading">
			<div class="col-md-8 col-md-offset-2">
				<table class="table table-hover grade-table" v-if="quizs.length>0">
				    <tr class="table-header">
				        <th>测试</th>
				        <th>时间</th>
				        <th>成绩</th>
				    </tr>
				    <tr v-for="quiz in quizs" transition="fade">
				        <td>{{quiz.qus_name}}</span> </td>
				        <td>{{quiz.qus_create_time}}</td>
				        <td :class="{'text-danger': quiz.stu_score==='未交'}">{{quiz.stu_score}}</td>
				    </tr>
				</table>
				<div class="display-hint" v-else>
                    <p>暂无测试成绩记录 (该班级没有学生或您未发布测试)</p>
                </div>
			</div>
		</div>
	</div>
</template>

<script>
	import HeaderClass from '../../Component/HeaderClass/HeaderClass';
	import Pagenation from '../../Component/Pagenation/Pagenation';
	import Notice from '../../Component/Notice/Notice';

	export default {
		created: function() {
			this.claId = location.search.substring(1).split("=")[1];
			this.getGrades();
		},
		data() {
			return {
				claId: -1,
				notice: {type: 0, msg: ""},
				loading: false,
				searchContent: "",
				quizs: [],
				quizLeft: 0,
			}
		},
		components: {
			HeaderClass,
			Pagenation,
			Notice
		},
		methods: {
			getGrades: function(np) {
				this.loading = true;
				this.$http.post('/stuResult/stuQuizGrade', {cla_id: this.claId}).then(function(resp) {
					this.loading = false;
					if (resp.data.status === 1) {
						this.quizs = resp.data.data.quiz;
						resp.data.data.quiz.forEach((value) => {
							if (value.stu_score === '未交') {
								this.quizLeft++;
							}
						})
					} else {
						this.notice = {type: 0, msg: resp.data.message};
					}
				}, function(resp) {
					// error callback
			        this.notice = {type: 0, msg: resp.statusText};
			        this.loading = false;
				})
			}
		}
	}
</script>

<style>
	.table{
	    background-color: #fff;
	}
	.table .table-header{
	    background-color: #f5f5f5;
	}
	.grade-table {
		margin-top: 20px;
	}
	.grade-table > tbody > tr > th, 
	.grade-table > tbody > tr > td {
	    height: 50px;
	    text-align: center;
	    vertical-align: middle;
	}
	.grade-table {
		border: 1px solid #dce4ec;
	}
	.text-muted {
		margin-right: 10px;
	}
</style>